.nom-steps {
  &:not(.nom-step-label-vertical) .nom-step:first-child {
    padding-left: 0;
  }

  &:not(.nom-step-label-vertical) .nom-step {
    padding-left: 1rem;
    white-space: nowrap;
  }

  &.nom-steps-horizontal .nom-step:last-child {
    flex-grow: 1;
  }

  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--nom-step-line-primary-color);
  text-align: initial;
  list-style: none;

  .nom-step {
    position: relative;
    flex: 1;
    flex-grow: 2;
    overflow: hidden;
    vertical-align: top;

    >.nom-step-item-container {
      outline: none;

      >.nom-step-item-tail {
        display: none;
      }

      >.nom-step-item-icon {
        display: inline-block;
        width: var(--nom-step-item-icon-size);
        height: var(--nom-step-item-icon-size);
        margin-right: 0.5rem;
        line-height: var(--nom-step-item-icon-size);
        text-align: center;
        background-color: var(--nom-step-item-icon-bg-color);
        border: 1px solid var(--nom-step-border-color);
        border-radius: var(--nom-step-item-icon-size);

        &.nom-step-item-icon-customer {
          font-size: 2rem;
          border: none;
        }

        &.nom-step-item-icon-whole-customer {
          width: auto;
          height: auto;
          line-height: inherit;

          .nom-progress-line {
            min-width: 140px;
          }
        }
      }

      .nom-step-item-content {
        position: relative;
        display: inline-block;
        padding-right: 1rem;
        vertical-align: top;

        .nom-step-item-title {
          display: inline-block;
          color: var(--nom-step-line-primary-color);
          font-size: var(--nom-step-item-title-fontsize);
          line-height: var(--nom-step-item-icon-size);
        }

        .nom-step-item-subtitle {
          display: inline;
          margin-left: 0.5rem;
          color: var(--nom-step-line-subtitle-color);
          font-weight: 400;
          font-size: var(--nom-step-item-fontsize);
        }

        .nom-step-item-description {
          color: var(--nom-step-line-primary-color);
          font-size: var(--nom-step-item-fontsize);
        }
      }
    }

    &.nom-step-item-wait {
      .nom-step-item-icon {
        color: var(--nom-color-text-2);
        background-color: var(--nom-step-item-icon-bg-color);
        border-color: var(--nom-step-border-color);
      }
    }

    &.nom-step-item-process {
      .nom-step-item-icon {
        color: var(--nom-step-item-icon-bg-color);
        background-color: var(--nom-color-primary);
        border-color: var(--nom-color-primary);
      }

      .nom-step-item-container {
        >.nom-step-item-icon-customer {
          color: var(--nom-color-primary);
          background-color: var(--nom-step-item-icon-bg-color);
        }
      }
    }

    &.nom-step-item-finish {
      .nom-step-item-icon {
        color: var(--nom-color-primary);
        border-color: var(--nom-color-primary);
      }
    }

    &.nom-step-item-error {
      .nom-step-item-icon {
        color: var(--nom-color-danger);
        background-color: var(--nom-step-item-icon-bg-color);
        border-color: var(--nom-color-danger);
      }

      .nom-step-item-content {
        .nom-step-item-title {
          color: var(--nom-color-danger);
          opacity: 0.85;
        }

        .nom-step-item-subtitle {
          color: var(--nom-color-danger);
          opacity: 0.45;
        }

        .nom-step-item-description {
          color: var(--nom-color-danger);
          opacity: 0.85;
        }
      }
    }

    &:not(:last-child) {
      .nom-step-item-title {
        &::after {
          position: absolute;
          top: 1rem;
          left: 100%;
          display: block;
          width: 9999px;
          height: 1px;
          background-color: var(--nom-step-line-color);
          transition: all .3s;
          content: '';
        }
      }

      &.nom-step-item-finish {
        .nom-step-item-title {
          &::after {
            background-color: var(--nom-color-primary);
          }
        }
      }
    }
  }

  // vertical布局
  &.nom-steps-vertical {
    flex-direction: column;

    >.nom-step {
      flex: 1 0 auto;
      padding-left: 0;
      overflow: visible;

      &.nom-step-item-icon-render-mode {
        &.nom-step-item-finish {
          &::after {
            background-color: var(--nom-color-primary) !important;
          }
        }

        .nom-step-item-tail {
          display: none !important;
        }

        &:not(:last-child)::after {
          display: block;
          width: 1px;
          height: 50px;
          margin-left: 1rem;
          background-color: var(--nom-step-line-color);
          border-radius: 1px;
          content: '';
        }
      }



      >.nom-step-item-container {
        >.nom-step-item-content {
          >.nom-step-item-title {
            &::after {
              display: none;
            }
          }

          >.nom-step-item-description {
            min-height: 3rem;
            padding-bottom: 1rem;
          }
        }
      }

      &:not(:last-child) {
        >.nom-step-item-container {
          >.nom-step-item-tail {
            position: absolute;
            top: 0;
            left: 1rem;
            display: block;
            width: 1px;
            height: 100%;
            padding: 2.5rem 0 0.5rem;

            &::after {
              display: inline-block;
              width: 1px;
              height: 100%;
              background-color: var(--nom-step-line-color);
              border-radius: 1px;
              content: '';
            }
          }
        }

        &.nom-step-item-finish {
          >.nom-step-item-container {
            >.nom-step-item-tail {
              &::after {
                background-color: var(--nom-color-primary);
              }
            }
          }
        }
      }
    }
  }


}
